<template>
  <div id="jobComplain">
    <h1 class="con-right-title">
      直播关键字管理
    </h1>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button type="warning" plain @click="handleAll">
        新增直播关键字
      </el-button>
      <!-- <freshCom @searchList="searchList"></freshCom> -->
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%" ref="table">
      <el-table-column
        prop="keyword"
        label="关键字"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="reply"
        label="回复内容"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="link"
        label="链接地址"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" min-width="100" align="center">
        <template slot-scope="scope">
          <el-button type="text" @click="handleComplain(scope.row)">
            编辑
          </el-button>
          <el-button type="text" @click="deleteLiveKeyword(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加\编辑学院弹窗 -->
    <handle-dialog
      v-if="handleDialogData.isShow"
      :handle-dialog-data="handleDialogData"
      @refreshList="refreshList"
    ></handle-dialog>
  </div>
</template>
<script>
import handleDialog from '@component/liveKeyword/handleDialog'
import { filterImageMixins } from '@/mixins/filterImage'
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  getSearchList,
  deleteLiveKeyword
} from '@/api/classifyManage/liveKeywrod'
export default {
  name: 'jobComplain',
  msg: '作业抄袭投诉管理',
  mixins: [filterImageMixins, saveScrollMixins],
  components: {
    handleDialog
  },
  data() {
    return {
      tableData: [],
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      handleDialogData: {
        isShow: false,
        params: '',
        type: ''
      },
      id: ''
    }
  },
  mounted() {
    this.searchList()
  },
  methods: {
    /* 获取列表 */
    searchList() {
      let params = {
        status: ''
      }
      getSearchList(
        params,
        (response) => {
          this.tableData = response
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 添加关键字
    handleAll() {
      this.handleDialogData.isShow = true
      this.handleDialogData.type = 'add'
    },
    // 编辑关键字/新增关键字
    handleComplain(row) {
      this.handleDialogData.isShow = true
      this.handleDialogData.type = 'edit'
      this.handleDialogData.params = row
    },
    // 删除关键字
    deleteLiveKeyword(row) {
      this.$confirm('真的要删除此关键字吗?', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const params = {
            id: row.id
          }
          deleteLiveKeyword(
            params,
            (response) => {
              this.searchList()
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
            }
          )
        })
        .catch(() => {})
    },
    refreshList() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#jobComplain {
  .img-box {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;

    .img-inner-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      text-align: center;

      .el-image {
        width: 100%;
        height: 100%;
      }

      img {
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
      }
    }

    .num {
      position: absolute;
      display: block;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 16px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 16px;
    }
  }
}
</style>
